//引入iconfont图标链接
	@import '//at.alicdn.com/t/font_3122992_a2kza1z541p.css';

	@font-face {
		font-family: 'webfont';
		font-display: swap;
		src: url('//at.alicdn.com/t/webfont_fps8ks6wa18.eot');
		/* IE9*/
		src: url('//at.alicdn.com/t/webfont_fps8ks6wa18.eot?#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.woff2') format('woff2'),
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.woff') format('woff'),
			/* chrome、firefox */
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.ttf') format('truetype'),
			/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
			url('//at.alicdn.com/t/webfont_fps8ks6wa18.svg#NotoSansHans-Black') format('svg');
		/* iOS 4.1- */
	}

	.web-font {
		font-family: "webfont" !important;
		font-size: 15px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}

	@fullWidth: 100%;
	@fullHeight: 100%;

	.seticonColor(@color) {
		cursor: pointer;

		&:hover {
			color: @color;
			opacity: 0.7;
		}
	}

	.icon {
		&.black {
			.seticonColor(gray);
		}

		&.blue {
			.seticonColor(deepskyblue);
		}
	}

	.flexLayout {
		display: flex;
		flex-direction: row;
	}

	.PositionLayout(@childLayout) {
		position: @childLayout;
	}

	#index {
		width:1519.2px;
		height:auto;
		// background-color: green;
		left: 0px;
		top: 0px;
		.PositionLayout(absolute);
		.flexLayout;
		background-color: var(--color-bg-5);
		color: var(--color-text-1);
		overflow-x: hidden;

		#topbar {
			height: @fullHeight;
			margin-left: 4%;
			// background-color: red;
			.PositionLayout(relative);
			.flexLayout;

			#topbar-leftnav {
				width: 25%;
				height: @fullHeight;
				// background-color: skyblue;
				transform: translateX(37%);
				padding-right: 2%;
				.PositionLayout(relative);

				a {
					text-decoration: none;
					color: var(--color-content-a, '#4c4c4c');

					&:hover {
						color: orangered;
					}
				}
			}

			#topbar-rightnav {
				width: 30%;
				height: @fullHeight;
				// background-color: white;
				transform: translateX(40%);
				padding-right: 1%;
				.PositionLayout(relative);
			}
		}

		#evaluating {
			width: @fullWidth;
			height: auto;
			background-color: var(--color-content);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			.PositionLayout(relative);
			
			#tab-bar{
				margin-left: -15%;
				//background-color: antiquewhite;a
				margin-right: 15%;
				
				.tabs-font{
					font-size: 16px;
					font-weight: bold;
					
					&.actived{
						color: #b06500;
					}
				}
			}
			
			#evaluating-title{
				width: 85%;
				margin-top: 2%;
				margin-left: 11%;
				text-align: left;
				.PositionLayout(relative);
				
				#title{
					margin-left: 2%;
					font-weight: bold;
					.PositionLayout(relative);
				}
				
				#type{
					margin-left: 2%;
					font-size: 10px;
					.PositionLayout(relative);
				}
				
				#count{
					margin-left: 2%;
					font-size: 10px;
					.PositionLayout(relative);
				}
			}
			
			.user-card{
				height:398px;
			}
			
			#article{
				width:80%;
				margin-left: 12%;
				text-align: left;
				height: auto;
				.flexLayout;
				.PositionLayout(relative);
			}
			
			#fillContent{
				text-align: left;
				height: auto;
				width: 790px;
				.PositionLayout(relative);
			}
			
			#article-time{
				width: auto;
				justify-content: flex-start;
				display: flex;
				.PositionLayout(relative);
			}
			
		}
		
		#footer {
			width: @fullWidth;
			height: @fullHeight;
			//background-color: black;
			.flexLayout;
			 justify-content: flex-start;
			.PositionLayout(relative);
			
			#footer-header{
				margin-left: 8.5%;
			}
		}
	}